<!--
    个人中心
    梁
    2019年5月6日
    -->
<template lang="pug">
  kalix-master
    div.box
      div.boxLeft
        UserUnit
        Personage
      div.boxRight
        h1 个人基本信息
        div.content
          div.head
            img(src="/static/center/头像_u4202.png")
            //div
            el-upload(
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            multiple
            :limit="1"
            :file-list="fileList")
              el-button(size="small" type="primary") 点击上传
        div.centerBox
          ul
            li
              span.centerP 账号 :
              el-input( placeholder="请输入用户名" v-model="account")
              span.centerX 修改
            li
              span.centerP 密码 :
              el-input(text="email" placeholder="请输入6-8位密码" v-model="password")
              span.centerX 修改
            li
              span.centerP 手机号 :
              el-input(placeholder="请输入11位手机号" v-model="mobile")
              span.centerX 更换手机号
            li
              span.centerP 邮箱 :
              el-input( text="email" placeholder="请输入邮箱" v-model="email")
              span.centerX 绑定
            li
              span.centerP 微信 :
              el-input( placeholder="请输入微信号" v-model="wechat")
              span.centerX 绑定
            li
              span.centerP QQ :
              el-input( placeholder="请输入QQ号" v-model="qq")
              span.centerX 绑定
            li
              span.centerP 姓名 :
              el-input( placeholder="请输入真实姓名" v-model="name")
            li
              span.centerP 性别 :
              input( placeholder="请输入性别" type="radio" name="name")
              span 女
              input( placeholder="请输入性别" type="radio" name="name")
              span 男
            li
              span.centerP 学院 :
              el-select(v-model="value1" placeholder="请选择")
                el-option(v-for="item in college" :key="item.value" :label="item.label" :value="item.value")
              <!--el-input( placeholder="请输入学院" v-model="college")-->
            li
              span.centerP 专业 :
              el-select(v-model="value2" placeholder="请选择")
                el-option(v-for="item in major" :key="item.value" :label="item.label" :value="item.value")
              <!--el-input( placeholder="请输入专业" v-model="major")-->
            li
              span.centerP 年级 :
              el-select(v-model="value3" placeholder="请选择")
                el-option(v-for="item in grade" :key="item.value" :label="item.label" :value="item.value")
              <!--el-input( placeholder="请输入年级" v-model="grade")-->
            li
              span.centerP 班级 :
              el-select(v-model="value4" placeholder="请选择")
                el-option(v-for="item in classGrade" :key="item.value" :label="item.label" :value="item.value")
              <!--el-input( placeholder="请输入班级" v-model="classGrade")-->
            li
              span.centerP 出生年月 :
              el-input( placeholder="请输入年月日" v-model="dateBirth")
            li
              span.centerP 学号/工号 :
              el-input( placeholder="请输入学号/工号" v-model="number")
            li
              span.centerP 职务 :
              el-select(v-model="value5" placeholder="请选择")
                el-option(v-for="item in duty" :key="item.value" :label="item.label" :value="item.value")
              <!--el-input( placeholder="请输入职务" v-model="duty")-->
            li
              span.centerP 职称 :
              el-select(v-model="value6" placeholder="请选择")
                el-option(v-for="item in jobCall" :key="item.value" :label="item.label" :value="item.value")
              <!--el-input( placeholder="请输入职称" v-model="jobCall")-->
            li.profile
              span.centerP 个人简介 :
              textarea.textInput( wrap="hard" style="resize:none" maxlength="300" v-model="brief")
          span.baocun 保存
    div.clearfix
</template>

<script>
  export default {
    name: 'PersonalCenter',
    data() {
      return {
        indexs: 0,
        fileList: [],
        account: null, // 账号
        password: null, // 密码
        mobile: null, // 手机号
        email: null, // 邮箱
        wechat: '', // 微信
        qq: null, // QQ号
        name: '', // 姓名
        gender: '', // 性别
        // college: '', // 学院
        // major: '', // 专业
        // grade: '', // 年级
        // classGrade: '', // 班级
        dateBirth: '', // 出生年月
        number: '', // 学号/工号
        // duty: '', // 职务
        // jobCall: '', // 职称
        brief: '',
        college: [
          {
            value: '选项1',
            label: '学院1'
          }, {
            value: '选项2',
            label: '学院2'
          }, {
            value: '选项3',
            label: '学院3'
          }, {
            value: '选项4',
            label: '学院4'
          }, {
            value: '选项5',
            label: '学院5'
          }
        ],
        major: [
          {
            value: '选项1',
            label: '专业1'
          }, {
            value: '选项2',
            label: '专业2'
          }, {
            value: '选项3',
            label: '专业3'
          }, {
            value: '选项4',
            label: '专业4'
          }, {
            value: '选项5',
            label: '专业5'
          }
        ],
        grade: [
          {
            value: '选项1',
          label: '大一'
        }, {
            value: '选项2',
          label: '大二'
        }, {
            value: '选项3',
          label: '大三'
        }, {
            value: '选项4',
          label: '大四'
        }
        ],
        classGrade: [
          {
            value: '选项1',
          label: '班级1'
        }, {
            value: '选项2',
          label: '班级2'
        }, {
            value: '选项3',
          label: '班级3'
        }
        ],
        duty: [
          {
            value: '选项1',
          label: '职务1'
        }, {
            value: '选项2',
          label: '职务2'
        }, {
            value: '选项3',
          label: '职务3'
        }, {
            value: '选项4',
          label: '职务4'
        }, {
            value: '选项5',
          label: '职务5'
        }
        ],
        jobCall: [
          {
            value: '选项1',
          label: '职称1'
        }, {
            value: '选项2',
          label: '职称2'
        }, {
            value: '选项3',
          label: '职称3'
        }
        ],
        value1: [],
        value2: [],
        value3: [],
        value4: [],
        value5: [],
        value6: []
      }
    },
    methods: {
      listMessage(index) {
        this.indexs = index
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        console.log(file)
      },
      beforeRemove(file, fileList) {
        return this.$confirm('确定移除吗')
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .box
    width 1200px
    margin 5px auto

  .boxLeft
    width 247px
    height 1471px
    float left

  .boxLeftTop
    width 247px
    height 271px
    background-color #F4F4F4
    padding 20px 70px
    box-sizing border-box
    text-align center
    .safetyName
      margin 14px 0
    .safetyList
      margin-bottom 20px
      span
        margin 0 3px
    .color
      color #FF9933

  .boxLeftBottom
    width 247px
    height 1140px
    .personage
      display block
      width 247px
      height 60px
      line-height 60px
      text-align center
      border 1px solid #ccc
      background-color #F2F2F2
      cursor pointer
      position relative
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
      .icon
        position absolute
        width 20px
        height 20px
        top 1px
        left 56px
        font-size 22px
        color #333333
    .listBorder
      border none
      border-left 4px solid #FF9933
      background-color #fff
      span
        color #FF9933 !important
    .text
      color #666666
      font-size 18px

  .boxRight
    width 926px
    height 1471px
    border 1px solid #ccc
    border-radius 5px
    float right
    padding 20px 20px 0 24px
    box-sizing border-box

  h1
    font-size 20px
    color #FF9933

  .content
    width 600px
    margin 38px auto

  .head
    width 120px
    height 140px
    margin-left 200px
    text-align center

  /*div*/
  /*width 120px*/
  /*height 30px*/
  /*line-height 30px*/
  /*border-radius 15px*/
  /*background-color #FF9933*/
  /*text-align center*/
  /*color #fff*/
  /*margin-top 8px*/
  /*cursor pointer*/

  .centerBox
    width 550px
    height 90%
    margin 0 auto
    li
      margin 15px 0
      width 510px
      height 35px
      line-height 32px
      position relative

  .centerP
    display inline-block
    width 90px
    margin-right 20px
    text-align right
    font-size 15px
    color #525252

  .centerX
    font-size 14px
    color green
    margin-left 22px
    cursor pointer

  .centerBox .profile
    width 500px
    height 122px

  .textInput
    width 300px
    height 170px
    box-sizing border-box

  .el-input
    width 300px
    height 35px

  .baocun
    display block
    width 80px
    height 34px
    text-align center
    line-height 34px
    color #fff
    background-color #FF9933
    border-radius 5px
    cursor pointer
    margin-left 200px
    font-weight 700
    margin-top 104px

</style>
<style lang="stylus" rel="stylesheet/stylus">
  .head
    .el-button--small, .el-button--small.is-round
      width 120px
      height 30px
      border-radius 15px
      background-color #FF9933
      text-align center
      color #fff
      margin-top 8px
      cursor pointer
    .el-button--primary
      border none

  .el-select
    width 300px
</style>
